import indexStyle from '@/pages/index.less';
import { Card } from 'antd'
import { useInit } from '@/hooks'
import { getArticleList } from '@/api/article'
import style from './NewArticle.less'
import { PageLoading } from '@ant-design/pro-layout'

import { Link } from 'umi';

const gridStyle: React.CSSProperties = {
  width: '33.3%',
  textAlign: 'center',
};

export default function NavArticlePage() {
  let [list] = useInit(getArticleList);

  return (
    <div className={indexStyle.mt20}>

      <Card title="最新文章" extra={<><Link to="/article/articleAll">全部文章</Link></>}>

        {
          list.length > 0? list[0].map((item: any) => {
            return <Card.Grid style={gridStyle} key={item.id}>
              <img style={{ width: '100%', height: '110px' }} src={item.cover} alt="" />
              <p className={style.subTitle}>
                { item.title }
              </p>
            </Card.Grid>
          }): <PageLoading/>
        }

      </Card>
    </div>
  );
}
